<template>
	<view class="content">
		<view class="con-head">创建计划</view>
		<view>
			<view class="label">
				<view class="label-text">计划时间</view>
				<picker mode="time" :value="form.time" start="00:00" end="24:00" @change="bindTimeChange">
					<view class="uni-input">{{form.time}}</view>
				</picker>
			</view>
			<view class="label">
				<view class="label-text">计划类型</view>
				<view style="width: 100px;">
					<uni-data-select v-model="form.type" :localdata="typeClassify" @change="change" style="width: 100%;"
						:clear="false"></uni-data-select>
				</view>
			</view>
			<view class="label">
				<view class="label-text">计划名称</view>
				<view style="width: 100px;background-color: #fff;border-radius: 10rpx;">
					<input v-model="form.title" style="color:#000;padding: 10rpx 30rpx;font-size: 44rpx;" />
				</view>
			</view>
			<view class="label">
				<view class="label-text">提醒方式</view>
				<view style="width: 100px;">
					<uni-data-select v-model="form.warn" :localdata="warnClassify" @change="changeWarn"
						style="width: 100%;" :clear="false"></uni-data-select>
				</view>
			</view>
			<view class="label">
				<view class="label-text">铃声选择</view>
				<view style="width: 100px;">
					<uni-data-select v-model="form.music" :localdata="musicClassify" @change="changeMusic"
						style="width: 100%;" :clear="false"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="con-btm" @click="confirm">完成</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					time: "06:00",
					type: 0,
					title: "起床",
					warn: 0,
					music: 1
				},
				typeClassify: [{
						value: 0,
						text: "学习"
					},
					{
						value: 1,
						text: "运动"
					}, {
						value: 2,
						text: "兴趣"
					},
					{
						value: 3,
						text: "人工智能"
					}
				],
				warnClassify: [{
						value: 0,
						text: "每天"
					},
					{
						value: 1,
						text: "每周一"
					}, {
						value: 2,
						text: "每周二"
					},
					{
						value: 3,
						text: "每周三"
					}, {
						value: 4,
						text: "每周四"
					}, {
						value: 5,
						text: "每周五"
					}, {
						value: 6,
						text: "每周六"
					}, {
						value: 7,
						text: "每周日"
					}
				],
				musicClassify: [{
						value: 0,
						text: "小童"
					},
					{
						value: 1,
						text: "小玲"
					}
				],
				formList: []
			};
		},
		onShow() {	
			this.formList = uni.getStorageSync('jihua') || []
		},
		methods: {
			bindTimeChange(e) {
				this.form.time = e.detail.value
			},
			change(e) {
				this.form.type = e
			},
			changeWarn(e) {
				this.form.warn = e
			},
			changeMusic(e) {
				this.form.music = e
			},
			confirm() {
				this.formList.push(this.form)
				//存缓存
				uni.setStorageSync(
					"jihua",
					this.formList
				);
				uni.navigateBack()
			}
		}
	}
</script>
<style>
	::v-deep .uni-select {
		background-color: #fff;
		height: 26px;
	}

	::v-deep .uni-scroll-view {
		color: #000;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 70rpx 30rpx;

		.con-head {
			text-align: center;
			margin: 0 0 60rpx 0;
		}

		.label {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 0 0 36rpx 0;
		}

		.uni-input {
			background-color: #fff;
			border-radius: 10rpx;
			width: 100px;
			text-align: center;
			color: #000;
			height: 26px;
			line-height: 26px;
		}

		.con-btm {
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 90px;
			border: 1rpx solid #fff;
			text-align: center;
			padding: 10rpx 0;
			border-radius: 20rpx;
		}
	}
</style>